<template>
  <ul class="video-control">
    <li v-show="!isPlaying">
      <a @click="togglePlaying(true)" href="javascript:;">
        <i class="el-icon-video-play" />
      </a>
    </li>
    <li v-show="isPlaying">
      <a @click="togglePlaying(false)" href="javascript:;">
        <i class="el-icon-video-pause" />
      </a>
    </li>
    <li>
      <a @click="handleFullScreen" href="javascript:;">
        <i class="el-icon-full-screen" />
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  name: "v-video-control",
  components: {
  },
  props: {
  },
  data() {
    return {
      isPlaying: false
    }
  },
  mounted() {
  },
  methods: {
    togglePlaying(isPlaying) {
      this.setPlaying(isPlaying)
      this.$emit('toggle-playing', isPlaying)
    },
    setPlaying(isPlaying) {
      this.isPlaying = isPlaying
    },
    handleFullScreen() {
      this.$emit('full-screen')
    }
  }
}
</script>

<style lang="scss" scoped>
.video-control{
  width: 100%;
  height: 40px;
  list-style: none;
  background-color: #000000;
  margin: 0;
  display: flex;
  font-size: 20px;
  padding-left: 10px;
  >li{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: #fff;
    >a{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
    }
  }
}
</style>
